docs: add AgentPrompt component#1084
Conversation
Add an AgentPrompt callout component for docs pages. Readers can copy a pre-written prompt or open it directly in Claude, ChatGPT, or Gemini. - Create AgentPrompt component adapted for Fumadocs/Next.js - Register in MDX components alongside TypeTable - CSS uses Fumadocs theme variables for light/dark mode Usage in MDX: <AgentPrompt prompt="Build a Sui transaction that..." /> Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
jessiemongeon1
had a problem deploying
to
sui-typescript-aws-kms-test-env
GitHub Actions
Failure
|
|
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
jessiemongeon1
temporarily deployed
to
sui-typescript-aws-kms-test-env
GitHub Actions
Inactive
![clud-bot[bot]](https://avatars.githubusercontent.com/in/2762678?s=60&v=4){kind=small}
There was a problem hiding this comment.
Reviewed the AgentPrompt component. Small, self-contained, styles look correct for Fumadocs theme vars. A few issues below, none blocking.
Verify the agent prefill URLs actually work. The whole value of this component is opening an agent with the prompt pre-filled. claude.ai/new?q= and chatgpt.com/?q= are known to accept a query param, but gemini.google.com/app?q= does not support prefilling a prompt via query string — the param is silently ignored and Gemini opens empty. Worth confirming all three against the test-plan checkbox before merge; if Gemini can't be prefilled, either drop it or link to a working entry point.
Dead code (pageName). Lines 48–52 compute and store pageName in state but it's never rendered or used anywhere. This also triggers an oxlint no-unused-vars warning. Remove the state + the effect that sets it.
setCopied(true) fires even when clipboard is unavailable. In copyPrompt, the success state is set unconditionally, so on browsers/contexts without navigator.clipboard (e.g. non-HTTPS) the button shows "✓ Copied" without anything being copied. Minor, but consider gating the setCopied(true) on a successful write.
No changeset is included — the bot flagged it, but since @mysten/docs is a docs site this is likely fine to ignore.
There was a problem hiding this comment.
Follow-up on the styling, after checking it against the actual docs setup.
Theme variables are wrong — the card won't pick up theme colors at all. The styles reference var(--fd-border, hsl(var(--border))), var(--fd-card, ...), var(--fd-primary, ...), etc. Fumadocs doesn't define --fd-border/--fd-card/--fd-primary — the real tokens are --color-fd-border, --color-fd-card, --color-fd-primary, --color-fd-foreground, --color-fd-muted-foreground, --color-fd-popover, --color-fd-accent, --color-fd-primary-foreground. The fallbacks (hsl(var(--border)), shadcn-style) also don't exist in this project. I grepped the whole packages/docs tree plus fumadocs-ui/dist — none of these names are defined anywhere except this new file. So every var() resolves to nothing, the declarations are invalid, and the callout renders with browser-default border/background/text instead of the theme. The PR's "works in light and dark mode" claim isn't accurate as written. Fix: switch to the --color-fd-* token names.
CSS Modules is an outlier here (non-blocking). This is the only *.module.css file in the docs package. The site is Tailwind v4 + Fumadocs (global.css imports tailwindcss + the fumadocs presets), and components style with Tailwind utility classes. The module is correctly scoped (class names are hashed, no leakage), so it works — but it doesn't match the convention. Consider Tailwind classes with the fd-* color utilities to stay consistent.
- Use correct Fumadocs theme tokens (--color-fd-*) so the callout picks up light/dark theme colors instead of resolving to invalid vars. - Remove unused pageName state and effect (no-unused-vars). - Only set the copied state on a successful clipboard write so the button doesn't show "Copied" when the clipboard is unavailable. - Drop Gemini from the agent dropdown: gemini.google.com/app does not support prompt prefill via query string, so the link opened empty.
The AgentPrompt component was registered as an MDX component but never placed in any content page, so the callout/button never rendered. Add it to the top of the Sui TypeScript SDK landing page so it actually shows up, matching the usage pattern in the Sui docs.
This reverts commit 998e744.
Replace the standalone AgentPrompt callout with a CodeBlock wrapper that injects an "Open in agent" action next to the built-in copy button on every fenced code block. Clicking it opens the snippet in Claude or ChatGPT with the code pre-filled as the prompt. This wires into the default `pre` MDX component, so it applies to all code blocks automatically without per-page markup.
The dropdown was clipped by the code block's overflow-hidden. Render it in a portal on document.body with fixed positioning anchored to the button, and close it on scroll/resize so it stays aligned.
1 participant
Summary
Add an AgentPrompt callout component for SDK docs pages. Readers can copy a pre-written builder prompt or open it directly in Claude, ChatGPT, or Gemini with the prompt pre-filled.
Changes
components/AgentPrompt/index.tsx— Client component with copy button and agent dropdowncomponents/AgentPrompt/styles.module.css— Styles using Fumadocs theme variables (works in light and dark mode)app/[[...slug]]/page.tsx— Register AgentPrompt in MDX componentsUsage
Matches the same component added to Sui docs (Docusaurus) and SuiNS docs, adapted for the Fumadocs/Next.js framework used here.
Test plan
AI Assistance Notice